<template>
  <div class="targets-list-wp">
  	<div class="mb-20 text-right">
  		<a-button class="mr-10">导入</a-button>
  		<a-button type="primary">新增</a-button>	
  	</div>
		<a-table bordered :columns="_d.table.head" :data-source="_d.form.safetyDeviceList" :pagination="false" :loading="_d.table.loading">
			<template #bodyCell="{ column, record, index }">
				<template v-if="column.dataIndex == 'actions'">
					<a-space>
						<template v-if="!record.form">
							<a-button class="p-0" type="link" @click="editTr(record, index)">编辑</a-button>
							<a-button class="p-0" type="link" @click="deleteTr(index)">删除</a-button>
						</template>
						<template v-else>
							<a-button class="p-0" type="link" @click="saveTr(record, index)">保存</a-button>
							<a-button class="p-0" type="link" @click="cancelTr(record, index)">取消</a-button>
						</template>
					</a-space>
				</template>
				<template v-else-if="record.form">
					<a-form-item class="mb-0" :name="['safetyDeviceList',index,'form',column.dataIndex]" :rules="_d.rules[column.dataIndex] || []">
						<a-input v-model:value.trim="record.form[column.dataIndex]" placeholder="请输入"/>
					</a-form-item>
				</template>
			</template>
			<template #footer>
				<div class="text-center">
					<a-button @click="addTr()">
						<template #icon><plus-outlined/></template>
						<span>添加</span>
					</a-button>
				</div>
			</template>
		</a-table>
  </div>
</template>

<script setup>
	import { reactive, ref, computed, onMounted } from 'vue'
	import {Form, Modal, notification} from "ant-design-vue";
	import {targets} from "@/api/plan.js";

	const oTr = {
		bdName: '',
		bdModel: '',
		bdSpecif: '',
		bdNum: '',
		dbUnit: ''
	}

	const props = defineProps({
		id: {
			type: [Number,String]
		}
	})

	const _d = reactive({
		form: {
			safetyDeviceList: []
		},

		rules: {
			bdName: [
				{ required: true, trigger: 'blur', message: '请输入名称' }
			],
			bdModel: [
				{ required: true, trigger: 'blur', message: '请输入型号' }
			],
			bdSpecif: [
				{ required: true, trigger: 'blur', message: '请输入规格' }
			],
			bdNum: [
				{ required: true, trigger: 'blur', message: '请输入数量' }
			],
			dbUnit: [
				{ required: true, trigger: 'blur', message: '请输入制造单位' }
			],
		},

		table: {
			loading: false,
			head: [
				{title: '名称', dataIndex: 'bdName', align: 'center', ellipsis: true},
				{title: '型号', dataIndex: 'bdModel', align: 'center', ellipsis: true},
				{title: '规格', dataIndex: 'bdSpecif', align: 'center', ellipsis: true},
				{title: '数量', dataIndex: 'bdNum', align: 'center', ellipsis: true},
				{title: '制造单位', dataIndex: 'dbUnit', align: 'center', ellipsis: true},
				{title: '操作', dataIndex: 'actions', align: 'center', width: 150}
			]
		},
	})

	// 验证
	const { resetFields, validate, validateInfos } = Form.useForm(_d.form, _d.rules);

	const editableData = reactive({});

	const count = computed(() => {
		let res = 0;
		_d.table.data.forEach(item => {
			res += Number(item.bbb);
		})
		return res.toFixed(2);
	})

	onMounted(() => {
		getData();
	})

	function getData() {
		// targets(props.id).then(res => {
		// 	console.log(res);
		// })
	}

	// 添加行
	function addTr() {
		let obj = Object.assign({}, oTr);
		obj.form = JSON.parse(JSON.stringify(obj));
		obj.isAdd = true; // 第一次添加时加入，保存时移除
		_d.form.safetyDeviceList.push(obj);
	}

	// 编辑
	function editTr(item, index) {
		item.form = JSON.parse(JSON.stringify(item));
	}

	// 保存
	function saveTr(item, index) {
		let keys = [];
		for(let key in item.form) {
			keys.push(['safetyDeviceList', index, 'form', key]);
		}
		formRef.value.validate(keys).then(() => {
			for(let key in item.form) {
				item[key] = item.form[key];
			}
			delete item.form;
			delete item.isAdd;
		})
	}

	// 删除
	function deleteTr(index) {
		Modal.confirm({
	    title: '提示',
	    content: '请确认是否删除该xxx？',
	    onOk() {
	      _d.form.safetyDeviceList.splice(index, 1);
	    }
	  });
	}

	// 取消
	function cancelTr(item, index) {
		if(item.isAdd) {
			_d.form.safetyDeviceList.splice(index, 1);
		} else {
			delete item.form;
		}
	}

</script>

<style lang="less" scoped>
.targets-list-wp {
	:deep(.ant-form-item-with-help) {
		.ant-form-item-explain {
			position: absolute;
    	bottom: -20px;
		}
	}
}
</style>